<template>
  <view class="">
    <template v-if="msgList.length > 0">
      <view class="msgItem" v-for="(item, index) in msgList" :key="index">
        <view class="titleBox">
          <view class="title">{{ item.title }}</view>
          <view class="time">{{ dayjs(item.createTime).format("YYYY-MM-DD") }}</view>
        </view>
        <view class="ctn">{{ item.content }}</view>
        <!-- <view class="btn">立即查看</view> -->
      </view>
      <u-loadmore height="30" :status="status" />
    </template>
    <view v-else style="width: 100%; display: flex; justify-content: center">
      <u-empty mode="list"></u-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import dayjs from "dayjs";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
import { getMessageList } from "@/api/order";
const formData = ref({
  pageNum: 1,
  pageSize: 10,
});
const msgList = ref<HomeTypes.msgRow[]>([]);
onBeforeMount(() => {
  getMsgListFn();
});
const status = ref("loadmore");
const getMsgListFn = async () => {
  console.log("123");
  if (status.value == "nomore") {
    return;
  }
  status.value = "loadmore";
  const res = await getMessageList(formData.value);
  msgList.value = msgList.value.concat(res?.rows);
  if (msgList.value.length >= (res?.total as number)) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
};
const rest = () => {
  formData.value.pageNum = 1;
  msgList.value = [];
  status.value = "loadmore";
  getMsgListFn();
};
onReachBottom(() => {
  formData.value.pageNum++;
  getMsgListFn();
});
</script>

<style lang="less" scoped>
.msgItem {
  background: #ffffff;
  border-radius: 32rpx;
  padding: 40rpx;
  padding-bottom: 24rpx;
  margin-top: 20rpx;
  .titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      line-height: 42rpx;
    }
    .time {
      font-size: 26rpx;
      color: #bebebe;
      line-height: 34rpx;
    }
  }
  .ctn {
    font-size: 26rpx;
    color: #595959;
    line-height: 36rpx;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f7f7f7;
  }
  .btn {
    padding-top: 24rpx;
    font-size: 26rpx;
    color: #bebebe;
    line-height: 36rpx;
  }
}
</style>
